<template>
  <div class="div-pop" :class="{'show-pop': show}" catchtouchmove="true" @click="closeExamples">
    <div class="popup-box" :class="{'show-popup-box': show}" @click.stop>
      <div class="popup-box__header">
        <div class="font-20 font-w">{{textData.title}}</div>
        <van-icon name="cross" class="font-w font-20" @click="closeExamples" />
      </div>
      <div class="popup-box__tip">
        <div class="popup-box__tiprow" v-for="(item, index) in textData.asks" :key="index">
          <span class="asterisk">*</span>
          <span class="mar-l-5">{{item}}</span>
        </div>
      </div>
      <div class="popup-box__content">
        <div class="correct-examples">
          <img class="width-343 height-216" v-if="textData.correct && fileSpace" :src="fileSpace + textData.correct" alt="">
          <van-icon class="correct-icon" name="checked" size="32px" color="#12BF98" />
        </div>
        <div class="error-examples">
          <div class="error-examples-item" v-for="(item, index) in textData.error" :key="index">
            <div class="error-img-box">
              <img class="width-104 height-68" v-if="item.src && fileSpace" :src="fileSpace + item.src" alt="">
              <van-icon class="error-icon" name="clear" size="21px" color="#FF1717" />
            </div>
            <div class="error-examples-text">{{item.text}}</div>
          </div>
        </div>
      </div>
      <div class="popup-box__footer">
        <div class="continue-btn" @click="continueUplaod">继续上传</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    textData: {
      // 文本数据
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  wathch: {
    show(value) {
      console.log(value)
    }
  },
  methods: {
    closeExamples() {
      // 通知点击了关闭按钮
      this.$emit('closeExamples')
    },
    continueUplaod() {
      // 通知点击了继续上传按钮
      this.$emit('continueUplaod')
    }
  }
}
</script>
<style lang="less" scoped>
.div-pop{
  align-items: flex-end;
  transition: all .3s;
  visibility: hidden;
  .popup-box{
    background-color: #FFF;
    border-radius: 15px 15px 0 0;
    padding: 0 16px 8px;
    transition: all .3s;
    box-sizing: border-box;
    max-height: 0;
    .popup-box__header{
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      /deep/.van-icon-cross{
        font-size: 20px;
        font-weight: bold;
      }
    }
    .popup-box__tip{
      margin-top: 5px;
      .popup-box__tiprow{
        font-size: 12px;
        line-height: 21px;
        .asterisk{
          color: #FF1717;
        }
      }
    }
    .popup-box__content{
      .correct-examples{
        margin-top: 15px;
        width: 343px;
        height: 216px;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        .correct-icon{
          position: absolute;
          right: 12px;
          bottom: 12px;
        }
      }
      .error-examples{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        .error-examples-item{
          .error-img-box{
            width: 104px;
            height: 68px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            .error-icon{
              position: absolute;
              right: 6px;
              bottom: 6px;
            }
          }
          .error-examples-text{
            font-size: 12px;
            color: #666;
            margin-top: 10px;
            text-align: center;
          }
        }
      }
    }
    .popup-box__footer{
      margin-top: 22px;
      .continue-btn{
        height: 48px;
        line-height: 48px;
        border-radius: 24px;
        background-color: #FF243D;
        color: white;
        text-align: center;
      }
    }
  }
  .show-popup-box{
    max-height: 100%;
  }
}
.show-pop{
  visibility: visible;
}
</style>
